<template>
  <el-popover placement="bottom"
              width="350"
              v-model="isOpen"
              trigger="click">

    <el-tabs v-model="activeName">
      <el-tab-pane 
                   name="first">
                   <span slot="label"><el-badge :is-dot="firstNoReadCount>0?true:false" class="notice-tab-item">通知（{{data1.length}}）</el-badge></span>
       </el-tab-pane>
      <el-tab-pane 
                   name="second">
             <span slot="label"><el-badge :is-dot="secondNoReadCount>0?true:false" class="notice-tab-item">消息（{{data2.length}}）</el-badge></span>
  
              </el-tab-pane>
    </el-tabs>
    <el-scrollbar style="height:300px">
      <avue-notice :data="data1"
                   :option="option1"
                   ref="notice1"
                   v-if="activeName=='first'"
                   @click="noticeReading"
                   @page-change="pageChange1">
                   </avue-notice>
     <avue-notice :data="data2"
                   :option="option2"
                   ref="notice2"
                   v-if="activeName=='second'"
                     @click="messageReading"
                   @page-change="pageChange2">
                   </avue-notice>
    </el-scrollbar>
    <div slot="reference">
      <el-badge :value="(firstNoReadCount >0||secondNoReadCount >0?'new':'')">
        <i class="el-icon-bell"></i>
      </el-badge>
    </div>
  </el-popover>
</template>

<script>
import {noticeUserPage,noticeRead} from "@/api/desk/notice";
import {messageUserPage,messageRead} from "@/api/desk/message";

export default {
  name: "top-notice",
  data () {
    return {
      isOpen:false,//是否打开
      pageSize:20,//每次获取条数
      activeName: 'first',
      firstNoReadCount:0,
      secondNoReadCount:0,
      option1: {
        props: {
          img: '',
          title: 'title',
          subtitle: 'releaseTime',
          tag: 'tag',
          status: 'readStatus'
        },
      },
      option2: {
        props: {
          img: '',
          title: 'content',
          subtitle: 'time',
          tag: 'tag',
          status: 'readStatus'
        },
      },
      data1: [],
      data2: [],
    }
  },
  created () {
    //定时器刷新通知信息
     let me=this
     me.init()
      //   不要在创建这里执行定时任务，关闭后都还在执行
    //  setInterval(function(){
    //     if(!me.isOpen) me.init()
    //  },60*1000);
      
  },    
  // mounted() {
  //     // 在组件挂载后启动定时器
  //     this.timer = setInterval(function(){
  //                 if(!me.isOpen) me.init()
  //             },60*1000);
      
  //   },
  //   beforeDestroy() {
  //     // 在组件销毁前清除定时器
  //     clearInterval(this.timer);
  //   },
   watch: {
      'data1'() {
          let noRead=0
          for(let i=0 ;i<this.data1.length;i++){
            if(this.data1[i].readStatus==3){
              noRead++
            }
          }
         this.firstNoReadCount =noRead;
      },
      'data2'() {
          let noRead=0
          for(let i=0 ;i<this.data2.length;i++){
            if(this.data2[i].readStatus==3){
              noRead++
            }
          }
         this.secondNoReadCount =noRead;
      }
  },
  methods: {
    init(){
      if(this.$refs.notice1 ){
         this.$refs.notice1.page=1
      }
      if(this.$refs.notice2 ){
         this.$refs.notice2.page=1
      }
      this.data1=[]
      this.data2=[]
      // 没数据，默认关闭
      // this.pageChange1(1)
      // this.pageChange2(1)
    },
    pageChange1 (page, done) {
      
       //console.log(this.$refs.notice1);
       noticeUserPage(page, this.pageSize ,{}).then(res => {
        if(res.data){
          const data = res.data.data;
          if(data.records.length>0){
               this.appendNotice(data.records);
          }else{
            if(this.$refs.notice1 && this.$refs.notice1.page>1){
                this.$refs.notice1.page=this.$refs.notice1.page-1
            }
            this.$message({
              message: "没有更多数据了!"
            });
          }
        }
            
        });
      if(done) done();
    
      /*setTimeout(() => {
        this.$message.success('页码' + page)
        this.data = this.data.concat(list);
        done();
      }, 1000)*/

    },
    appendNotice(data){
      for(let i=0 ;i<data.length;i++){
        
        data[i].releaseTime= data[i].categoryName +'    '+data[i].releaseTime
        data[i].tag=(data[i].readStatus==1?"New":"")
        data[i].readStatus=(data[i].readStatus==1?3:0)
      }
      this.data1=this.data1.concat(data);
    },
    noticeReading(o){
       noticeRead(o.id).then(() => {
          o.tag=""
          o.readStatus=0
          this.firstNoReadCount--
        });
    },
    pageChange2 (page, done) {
       //console.log(this.$refs.notice2);
       messageUserPage(page, this.pageSize  ,{}).then(res => {
        if(res.data){
          const data = res.data.data;
          if(data.records.length>0){
             this.appendMessage(data.records);
          }else{
            if(this.$refs.notice2 && this.$refs.notice2.page>1){
                this.$refs.notice2.page=this.$refs.notice2.page-1
            }
            this.$message({
              message: "没有更多数据了!"
            });
          }
        }
            
        });
      if(done) done();
    },
    appendMessage(data){
      for(let i=0 ;i<data.length;i++){
        data[i].content= data[i].title +'，' +data[i].content
        data[i].time= data[i].categoryName +'    '+data[i].time
        data[i].tag=(data[i].status==1?"New":"")
        data[i].readStatus=(data[i].status==1?3:0)
      }
      this.data2=this.data2.concat(data);
    },
    messageReading(o){
       messageRead(o.id).then(() => {
          o.tag=""
          o.readStatus=0
          this.secondNoReadCount--
        });
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep .notice-tab-item .is-dot{
  top:5px;
  right:5px
}
</style>
